<!DOCTYPE html>
<html lang="zh-CN"><!--编码标准-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	#carousel-example-generic .carousel-inner img{
    		height: 100%;/*这里需要动态获取屏幕的可视高度，但是有个问题就是，手机端轮播图的宽度永远是大于高度的*/
    		width: 100%;
    	}
    	.navbar{
    		margin-bottom: 0;
    	}
    	.btnm{
    		position: fixed;
    		z-index: 999;
    		max-height: 30px;
    		max-width: 40px;
    		background-color: black;
    		border: 1px #E5E5E5 solid;
    		border-radius: 4px;		
    		top: 80px;
    		padding:7px 0 9px;
    		cursor: pointer;
    	}
    	.line{
    		display:block;
    		background-color:#9D9D9D;
    		height:2px;
    		width: 12px;
    		margin: 2px auto;
    	}
    	.movem{
    		position: fixed;
    		z-index: 998;
    		height: 100%;
    		right: 0px;
    		top: 0px;
    		background-color:rgba(0,0,0,.6) ;
    		/*width: 100px;*/
    	}
    	.flex{
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		flex-wrap: wrap;
    		padding: 20px 0;
    	}
    	.flex li{
    		background-color: dodgerblue;
    		text-align: center;
    		padding: 20px;
    		list-style: none;
    		/*width: 600px;*/
    		height: 300px;
    	}
    	.flexx{
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    
    	}
    	.header{
    		height: 200px;
    		width: 50px;
    		/*width: 100px;*/
    		background-color: azure;
    	}
    	.centery{
    		height: 100px;
    		width: 100%;
    		background-color: black;
    	}
    	.footery{
    		height: 200px;
    		width: 100%;
    		background-color: greenyellow;
    	}
    	.footertwoy{
    		height: 200px;
    		width: 100%;
    		background-color:cornflowerblue;
    	}
    </style>
  
  </head>
  <body>
  	<!--导航条-->
	<nav class="navbar navbar-default navbar-inverse navbar-static-top">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span><!--缩小时候的菜单栏按钮-->
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">Brand</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
	        <li><a href="#">Link</a></li>
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">One more separated link</a></li>
	          </ul>
	        </li>
	      </ul>
	      <form class="navbar-form navbar-right">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="Search" style="background: #333;border: 0;border-bottom: 1px #FFF solid;border-radius: 0; color: #FFF;">
	        </div>
	        <button type="submit" class="btn btn-info">Submit</button>
	      </form>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
    <!--第一屏幕轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	  </ol>
	
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img src="images/banner1.jpg" alt="...">
	      <div class="carousel-caption">
	       	第一张图片
	      </div>
	    </div>
	    <div class="item">
	      <img src="images/banner2.jpg" alt="...">
	      <div class="carousel-caption">
	       	第二张图片
	      </div>
	    </div>
	    <div class="item">
	      <img src="images/banner3.jpg" alt="...">
	      <div class="carousel-caption">
	       	第三张图片
	      </div>
	    </div>
	  </div>
	
	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
	
	<!--侧边导航栏-->
	
	<!--按钮-->
	<div class="btnm col-lg-2 col-lg-offset-10 col-md-1 col-md-offset-11 col-xs-1 col-xs-offset-10">
		<span class="line"></span>			
		<span class="line"></span>			
		<span class="line"></span>			
	</div>
	<!--移动框-->
	<div class="movem row col-lg-3 col-lg-offset-9 col-md-2 col-md-offset-10 col-xs-3 col-xs-offset-9">
		<div class="flexx container-fluid">
				<div class="header "></div>
				<div class="centery"></div>
				<div class="footery"></div>
				<div class="footertwoy"></div>
		</div>
	</div>
	<!--内容-->
	<div class="container">
		<div class="row">
			<div class="col-lg-8" style="background-color: blueviolet;">
				<ul class="flex">
					<li class="flextest col-lg-1" style="background-color: aquamarine;"></li>
					<li class="flextest col-lg-3" style="background-color: chartreuse;"></li>
					<li class="flextest col-lg-9" style="background-color: darkseagreen;"></li>
					<li class="flextest col-lg-12" style="background-color: azure;"></li>
				</ul>
			</div>
			<div class="col-lg-4" style="height:300px;background-color: red;"></div>
		</div>
	</div>
	<!--<div class="" style="height: 2000px;"></div>-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </body>
</html>